<template>
    <div class="content_panel collection_statistics">

        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('collection.statistics')}}</span>
            </h3>
            <el-form ref="form" :model="form" :inline="false" class="module_form">
                <!--催收阶段，主管才显示-->
                <el-form-item v-if="roleId === '129'" prop="stageName" label="">
                    <el-select v-model="form.stageName" @change="handleStageNameChange" :placeholder="$t('collection.colPhase')">
                        <el-option v-for="stage in stageList" :key="stage.name" :label="stage.name" :value="stage.name"></el-option>
                    </el-select>
                </el-form-item>
                <!--催收员-->
                <el-form-item v-if="collectorList.length > 0" prop="collectionUserId" label="">
                    <el-select v-model="form.collectionUserId" @change="handleCollectorChange" :placeholder="$t('common.recruiter')" clearable>
                        <el-option v-for="collector in collectorList" :key="collector.collectionUserId" :value="collector.collectionUserId" :label="collector.collectionUserName"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>

        <div class="module_content">
            <div v-if="['141', '140'].includes(roleId) || 'S0' === form.stageName" class="s0_day">
                <div class="statistics_title">
                    <h3>{{ $t('collection.dayStatistics') }}:</h3><!--今日工作统计-->
                    <el-button @click="queryDayData" type="primary">{{ $t('collection.refreshData') }}</el-button><!--刷新数据-->
                </div>
                <div class="statistics_content">
                    <el-row>
                        <el-col :span="12">
                            <ul class="statistics_list">
                                <!--今日回款金额-->
                                <li>{{ $t('collection.dayRepayAmount') }}: {{ s0.day.currentDateRepayAmount | formatCurrency }}{{ s0.day.currentDateRepayAmount !== '' ? 'PHP' : '' }}</li>
                                <!--今日催回率-->
                                <li>{{ $t('collection.dayRecallRate') }}: {{ s0.day.currentDateRecoveryRate }}{{ s0.day.currentDateRecoveryRate !== '' ? '%' : '' }}</li>
                                <!--今日新增分案数-->
                                <li>{{ $t('collection.dayDivisions') }}: {{ s0.day.currentDateAssignedAmount }}</li>
                            </ul>
                        </el-col>
                        <el-col v-if="'141'===roleId" :span="12">
                            <ul class="statistics_list">
                                <!--回款金额组内业务排名-->
                                <li>{{ $t('collection.repayAmountRank') }}: {{ s0.day.currentDateRepayAmountRanking }}</li>
                                <!--催回率组内业务排名-->
                                <li>{{ $t('collection.recallRateRank') }}: {{ s0.day.currentDateRecoveryRateAmountRanking }}</li>
                            </ul>
                        </el-col>
                    </el-row>
                    <ring-svg :title="$t('collection.dayRecallRate')" :percent="s0.day.currentDateRecoveryRate"></ring-svg>
                </div>
            </div>

            <div v-if="['141', '140'].includes(roleId) || 'S0' === form.stageName" class="s0_month">
                <div class="statistics_title">
                    <!--本月工作统计-->
                    <h3>{{ $t('collection.monthStatistics') }}:</h3>
                    <el-button @click="queryMonthData" type="primary">{{ $t('collection.refreshData') }}</el-button><!--刷新数据-->
                </div>
                <div class="statistics_content">
                    <el-row>
                        <el-col :span="12">
                            <ul class="statistics_list">
                                <!--本月回款金额-->
                                <li>{{ $t('collection.monthRepayAmount') }}: {{ s0.month.currentMonthRepayAmount | formatCurrency }}{{ s0.month.currentMonthRepayAmount !== '' ? 'PHP' : '' }}</li>
                                <!--本月催回率-->
                                <li>{{ $t('collection.monthRecallRate') }}: {{ s0.month.currentMonthRecoveryRate }}{{ s0.month.currentMonthRecoveryRate !== '' ? '%' : '' }}</li>
                                <!--本月新增分案数-->
                                <li>{{ $t('collection.monthDivisions') }}: {{ s0.month.currentMonthAssignedAmount }}</li>
                            </ul>
                        </el-col>
                        <el-col v-if="'141'===roleId" :span="12">
                            <ul class="statistics_list">
                                <!--回款金额组内业务排名-->
                                <li>{{ $t('collection.repayAmountRank') }}: {{ s0.month.currentMonthRepayAmountRanking }}</li>
                                <!--催回率组内业务排名-->
                                <li>{{ $t('collection.recallRateRank') }}: {{ s0.month.currentMonthRecoveryRateAmountRanking }}</li>
                            </ul>
                        </el-col>
                    </el-row>
                    <ring-svg :title="$t('collection.monthRecallRate')" :percent="s0.month.currentMonthRecoveryRate"></ring-svg>
                </div>
            </div>

            <div v-if="['128', '127'].includes(roleId) || ['S1', 'S2', 'S3'].includes(form.stageName)" class="s123_day">
                <div class="statistics_title">
                    <h3>{{ $t('collection.dayStatistics') }}:</h3><!--今日工作统计-->
                    <el-button @click="queryDayData" type="primary">{{ $t('collection.refreshData') }}</el-button><!--刷新数据-->
                </div>
                <div class="statistics_content">
                    <el-row>
                        <el-col :span="12">
                            <ul class="statistics_list">
                                <!--今日回款金额-->
                                <li>{{ $t('collection.dayRepayAmount') }}: {{ s123.day.currentDateRepayAmount | formatCurrency }}{{ s123.day.currentDateRepayAmount !== '' ? 'PHP' : '' }}</li>
                                <!--今日新增分案数-->
                                <li>{{ $t('collection.dayDivisions') }}: {{ s123.day.currentDateAssignedAmount }}</li>
                            </ul>
                        </el-col>
                        <el-col v-if="'127'===roleId" :span="12">
                            <ul class="statistics_list">
                                <!--回款金额组内业务排名-->
                                <li>{{ $t('collection.repayAmountRank') }}: {{ s123.day.currentDateRepayAmountRanking }}</li>
                            </ul>
                        </el-col>
                    </el-row>
                    <histogram-svg :title="$t('collection.dayStatistics') + ('129'===roleId?form.stageName:'')" :data-list="s123.day.currentDateRepayAmountRankingList"></histogram-svg>
                </div>
            </div>

            <div v-if="['128', '127'].includes(roleId) || ['S1', 'S2', 'S3'].includes(form.stageName)" class="s123_month">
                <div class="statistics_title">
                    <h3>{{ $t('collection.monthStatistics') }}:</h3><!--本月工作统计-->
                    <el-button @click="queryMonthData" type="primary">{{ $t('collection.refreshData') }}</el-button><!--刷新数据-->
                </div>
                <div class="statistics_content">
                    <el-row>
                        <el-col :span="12">
                            <ul class="statistics_list">
                                <!--本月回款金额-->
                                <li>{{ $t('collection.monthRepayAmount') }}: {{ s123.month.currentMonthRepayAmount | formatCurrency }}{{ s123.month.currentMonthRepayAmount !== '' ? 'PHP' : '' }}</li>
                                <!--本月新增分案数-->
                                <li>{{ $t('collection.monthDivisions') }}: {{ s123.month.currentMonthAssignedAmount }}</li>
                            </ul>
                        </el-col>
                        <el-col v-if="'127'===roleId" :span="12">
                            <ul class="statistics_list">
                                <!--回款金额组内业务排名-->
                                <li>{{ $t('collection.repayAmountRank') }}: {{ s123.month.currentMonthRepayAmountRanking }}</li>
                            </ul>
                        </el-col>
                    </el-row>
                    <histogram-svg :title="$t('collection.monthStatistics') + ('129'===roleId?form.stageName:'')" :data-list="s123.month.currentMonthRepayAmountRankingList"></histogram-svg>
                </div>
            </div>
<!--            <div class="content_panel">-->
<!--                ddd-->
<!--            </div>-->
        </div>

    </div>
</template>

<script src="./main.js"></script>

<style lang="scss" scoped>
.module_content {
    //
}
.statistics_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    h3 {
        font-size: 18px;
    }
}
.statistics_content {
    margin-top: 20px;
    //display: flex;
    //justify-content: space-between;
    .statistics_list {
        //height: 40px;
        line-height: 40px;
    }
}
.s0_month, .s123_month {
    margin-top: 30px;
}
</style>
